<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>
<div id="wrap">
    <button @click="get1()">get1按钮</button>
    <br/>
    <button @click="get2()">get2按钮</button>
    <br/>
    <button @click="post()">post按钮</button>
    <br/>
    <button @click="jsonp1()">jsonp1按钮</button>
    <br/>
    <!--<button @click="jsonp2()">jsonp2按钮</button>-->
</div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#wrap',
        data: {},
        methods: {
            get1: function () {
//                get请求方式:$http.get('路径').then(请求成功处理的函数,请求失败处理的函数)
                this.$http.get('a.txt').then(function (res) {
                    alert(res.data);
                    console.log(res)
                }, function (res) {
                    alert(res.status + '请求错误')
                })
            },
            get2: function () {
//                get请求方式:$http.get('路径').then(请求成功处理的函数,请求失败处理的函数)
                this.$http.get('aa.txt').then(function (res) {
                    alert(res.data);
                    console.log(res)
                }, function (res) {
                    alert(res.status + '请求错误,没有aa.txt文件 ')
                })
            },
            post: function () {
//                psot请求方式:$http.post('路径',{传递的数据}).then(请求成功处理的函数,请求失败处理的函数)
                this.$http.post('post.php', {
                    a: 1,
                    b: 20
                }, {
//                    启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。form形式传给后台，而非json形式
                    emulateJSON: true
                }).then(function (res) {
//                    请求成功的数据
                    alert(res.data);
                }, function (res) {
//                    请求失败的状态码
                    alert(res.status);
                });
            },
            jsonp1: function () {
//                get请求方式:$http.get('路径').then(请求成功处理的函数,请求失败处理的函数)
                this.$http.jsonp('https://sug.so.360.cn/suggest', {
                    word: 'a',
                }).then(function (res) {
                    alert(res.data.s);
                    console.log(res)
                }, function (res) {
                    alert(res.status + '请求错误,没有aa.txt文件 ')
                })
            },
            jsonp2: function () {
                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
                    wd: 'a'
                }, {
                    jsonp: 'cb'
                }).then(function (res) {
                    alert(res.data.s);
                }, function (res) {
                    alert(res.status);
                });
            },
        },
    })
</script>
